<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ckeditor4</title>
    <!-- 引入文件 -->
    <script src="./js/ckeditor4/ckeditor.js"></script>
</head>
<body>
    <div style="height: 400px;width: 600px;">
        <textarea name="editor1" id="editor1" rows="10" cols="80" >
            &lt;p&gt;111&lt;/p&gt;&lt;p&gt;&lt;u&gt;&lt;em&gt;&lt;strong&gt;啧啧啧&lt;/strong&gt;&lt;/em&gt;&lt;/u&gt;&lt;/p&gt;
        </textarea>
    </div>
    <button onclick="getData()">确认!</button>

    <script>
        /*方式一,普通方式格式化, 手动配置*/
        // 格式化editor
        CKEDITOR.replace( 'editor1');
        // 配置toolbar
        CKEDITOR.editorConfig = function(config) {
		    config.toolbarGroups = [
                { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
                //{ name: 'editing', items: [ 'Scayt' ] },//拼写检查
                { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },//超链接
                { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },//图片,表格,公式...
                //{ name: 'tools', items: [ 'Maximize' ] },//去除全屏,在layer框中使用不要开启,用户可以开启layer全屏操作
                //{ name: 'document', items: [ 'Source' ] },//去除源码,用户使用不到
                '/',
                { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },
                { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },//段落与缩进
                { name: 'styles', items: [ 'Styles', 'Format' ] }//样式,格式
                //{ name: 'about', items: [ 'About' ] }//去除关于ckeditor
            ];
        };

        /*方式二,以配置文件方式格式化*/
        // CKEDITOR.replace( 'editor1' ,{
        //     customConfig: './js/ckeditor4/config.js'
        // });
        

        //获取内容
        function getData(){
            var html = CKEDITOR.instances.editor1.getData();
            console.log(html);
            alert(html);
        }

        var parser = new CKEDITOR.htmlParser();
        // parser.onTagOpen = function( tagName, attributes, selfClosing ) {
        //     alert(tagName);
        // };
        var result = parser.parse( '<p>Some <b>text</b>.</p>' );
        console.log(result);

    </script>
</body>
</html>